/**
 * 棋盘，canvas绘制棋盘和棋子
 */
var chess = document.getElementById("chess");
var context = chess.getContext("2d");

/*-----------*/
start();
/*-----------*/

// 开始游戏
function start() {
    // 初始化
    initData();
    // 绘盘
    drawChessBoard();
    // 电脑先手随机内部落子
    if (!mode && !order) { // 人机且电脑先手
        let x = Math.floor(Math.random() * conJunctions) + conJunctions;
        let y = Math.floor(Math.random() * conJunctions) + conJunctions;
        oneStep(x, y, true);
        player = false; // 白
    }
    // 人落子
    chess.addEventListener("click", clickChessBoard);
}

// 重玩
function replay() {
    // 清盘
    context.clearRect(0, 0, size, size);
    start();
}

// 绘制棋盘
function drawChessBoard() {
    // 背景色
    context.fillStyle = "#CDAA7D";
    context.fillRect(0, 0, size, size);
    // 棋盘线条色
    context.strokeStyle = "#bfbfbf";
    // 划线
    context.beginPath();
    for (let i = 0; i < lineCounts; i++) {
        let position = margin + i * rowWidth;
        // row lines
        context.moveTo(margin, position);
        context.lineTo(size - margin, position);
        context.stroke();
        // column lines
        context.moveTo(position, margin);
        context.lineTo(position, size - margin);
        context.stroke();
    }
    context.closePath();
}

// 绘制棋子
function drawPiece(i, j, side) {
    let x = margin + i * rowWidth;
    let y = margin + j * rowWidth;
    // arc
    context.beginPath();
    context.arc(x, y, pieceRadius, 0, 2 * Math.PI);
    // gradient
    let gradient = context.createRadialGradient(
        x + offset, y - offset, pieceRadius, x + offset, y - offset, 0);
    if (side) { // 黑
        gradient.addColorStop(0, "#0a0a0a");
        gradient.addColorStop(1, "#636766");
    } else { // 白
        gradient.addColorStop(0, "#d1d1d1");
        gradient.addColorStop(1, "#f9f9f9");
    }
    context.fillStyle = gradient;
    context.fill();
    context.closePath();
}

// 游戏结束
function gameOver(side) {
    let str = side ? "黑" : "白";
    if (order == side) { // 先手执黑胜 或者 后手执白胜
        records.win++;
    } else {
        records.lose++;
    }
    updateRecords();
    // 设置字体
    context.font = "4em bold 黑体";
    // 设置水平对齐方式
    context.textAlign = "center";
    // 设置垂直对齐方式
    context.textBaseline = "middle";
    // 设置颜色
    context.strokeStyle = "red";
    context.fillStyle = "green";
    // 绘制文字（参数：要写的字，x坐标，y坐标）
    context.strokeText(str + " 胜!", size / 2, size / 2);
    context.fillText(str + " 胜!", size / 2, size / 2);
    forbidClick();
}

// 更新记录
function updateRecords() {
    document.getElementById("records").innerText = `胜 ${records.win} 负 ${records.lose}`;
}

// 禁止落子,移除事件监听
function forbidClick() {
    chess.removeEventListener("click", clickChessBoard);
}

// 落子
function oneStep(i, j, side) {
    // 落子
    drawPiece(i, j, side);
    // 更新棋子矩阵
    pieceMatrix[i][j] = false;
    // 胜负判断逻辑
    for (let k = 0; k < counts; k++) {
        if (winMatrix[i][j][k]) {
            if (side) { // 黑
                white[k] = 6; // 被黑棋落子的赢法，白棋永远不可能赢了
                if (++black[k] == 5) {
                    gameOver(true);
                    return false;
                };
            } else { // 白
                black[k] = 6;
                if (++white[k] == 5) {
                    gameOver(false);
                    return false;
                };
            }
        }
    }
    return true;
}

// 点击棋盘事件
function clickChessBoard(e) {
    let x = e.offsetX; // 相对于chess的偏移
    let y = e.offsetY;
    // 寻找点击范围
    let i = Math.floor(x / rowWidth);
    let j = Math.floor(y / rowWidth);
    // 有子不得落子
    if (pieceMatrix[i][j]) {
        // 落子未终局（没有一方胜利结束游戏）
        if (oneStep(i, j, player)) {
            // 黑白交替走子
            if (mode) {
                player = !player;
            } else {
                computerAI(player);
            }
        }
    }
}
